import React from "react";
import axios from "./axios.js";
class Form extends React.Component {
  state = {
    input: "",
    list: [],
    already: [],
    un: [],
  };
  componentDidMount() {
    this.getList();
  }
  getList = async () => {
    let token = JSON.parse(localStorage.getItem("token"));
    let uid = JSON.parse(localStorage.getItem("uid"));
    const res = await axios.post("v1/matter/get", {
      token,
      uid,
    });
    console.log(res);
    this.setState({
      list: res.list,
      un: res.list.filter((item) => {
        return item.state === false;
      }),
      already: res.list.filter((item) => {
        return item.state === true;
      }),
    });
  };
  add = async () => {
    let token = JSON.parse(localStorage.getItem("token"));
    let uid = JSON.parse(localStorage.getItem("uid"));
    await axios.post("v1/matter/add", {
      token,
      uid,
      matter: this.state.input,
    });
    this.getList();
  };
  del = async (id) => {
    let token = JSON.parse(localStorage.getItem("token"));
    await axios.post("v1/matter/del", {
      token,
      _id: id,
    });
    this.getList();
  };
  update = async (id) => {
    let token = JSON.parse(localStorage.getItem("token"));
    await axios.post("v1/matter/update", {
      token,
      _id: id,
    });
    this.getList();
  };
  render() {
    const { input, list, already, un } = this.state;
    return (
      <div>
        <div>
          <input
            type="text"
            placeholder="Please input"
            value={input}
            onChange={(e) => {
              console.log(e.target.value);
              this.setState({ input: e.target.value });
            }} 
          />
          <button onClick={this.add}>添加</button>
          <ul>
            <li>
              全部
              {list.map((item, index) => {
                return (
                  <div key={index}>
                    <b>{index + 1}</b>.<span>{item.matter}</span>
                    <button onClick={this.del.bind(null, item._id)}>
                      删除
                    </button>
                    <button onClick={this.update.bind(null, item._id)}>
                      修改
                    </button>
                  </div>
                );
              })}
            </li>
            <li>
              已完成
              {already.map((item, index) => {
                return (
                  <div key={index}>
                    <b>{index + 1}</b>.<span>{item.matter}</span>
                    <button onClick={this.del.bind(null, item._id)}>
                      删除
                    </button>
                  </div>
                );
              })}
            </li>
            <li>
              未完成
              {un.map((item, index) => {
                return (
                  <div key={index}>
                    <b>{index + 1}</b>.<span>{item.matter}</span>
                    <button onClick={this.del.bind(null, item._id)}>
                      删除
                    </button>
                    <button onClick={this.update.bind(null, item._id)}>
                      修改
                    </button>
                  </div>
                );
              })}
            </li>
          </ul>
        </div>
      </div>
    );
  }
}
export default Form;